<?php

/*--------------------------------------------------------------------------/
* @Author		KulerThemes.com http://www.kulerthemes.com
* @Copyright	Copyright (C) 2012 - 2013 KulerThemes.com. All rights reserved.
* @License		KulerThemes.com Proprietary License
/---------------------------------------------------------------------------*/

?>

<?php echo $header; ?>
<?php if (isset($ksb_building_mode)) { ?>
    <style type="text/css">
        #header, .breadcrumb, .box > .heading .buttons,.vtabs, #footer {
            display: none !important;
        }

        #content {
            padding: 0 !important;
        }

        .box > .content {
            background: none !important;
        }

        .vtabs-content {
            padding-left: 15px !important;
        }
    </style>
<?php } ?>
    <script type="text/javascript">
        <?php if (isset($ksb_updated_module)) { ?>
        var ksb_updated_module = <?php echo $ksb_updated_module; ?>;
        <?php } ?>
    </script>
    <div id="content" class="kuler-module">
    <div class="breadcrumb">
        <?php foreach ($breadcrumbs as $breadcrumb) { ?>
            <?php echo $breadcrumb['separator']; ?><a href="<?php echo $breadcrumb['href']; ?>"><?php echo $breadcrumb['text']; ?></a>
        <?php } ?>
    </div>
    <?php if ($error_warning) { ?>
        <div class="warning"><?php echo $error_warning; ?></div>
    <?php } ?>
    <div class="box">
    <div class="heading clearafter">
        <h1><img src="./view/kulercore/images/logos/kuler_accordion.png" alt="<?php echo $heading_title; ?>" /></h1>
        <div class="buttons">
            <a onclick="$('#form').submit();" class="button save-settings"><?php echo $button_save; ?></a>
            <a onclick="$('#op').val('close'); $('#form').submit();" class="button cancel-settings"><?php echo $button_close; ?></a>
            <a href="<?php echo $cancel; ?>" class="button cancel-settings"><?php echo $button_cancel; ?></a>
        </div>
    </div>
    <div class="content">
    <form action="<?php echo $action; ?>" method="post" enctype="multipart/form-data" id="form">
    <input type="hidden" name="tab" id="tab" value="<?php echo $tab ?>" />
    <input type="hidden" name="op" id="op" />

    <div style="margin: 20px 0 0 30px;">
        <label><?php echo $__['entry_store']; ?></label>
        <select name="store_id" id="StoreSelector">
            <?php foreach ($stores as $store_id => $store_name) { ?>
                <option value="<?php echo $store_id; ?>"<?php if ($store_id == $selected_store_id) echo ' selected="selected"'; ?>><?php echo $store_name; ?></option>
            <?php } ?>
        </select>
    </div>

    <ul class="vtabs">
        <?php $module_row = 1; ?>
        <?php foreach ($modules as $module) { ?>
            <li>
                <a href="#tab-module-<?php echo $module_row; ?>" id="module-<?php echo $module_row; ?>">
                    <?php echo $module['main_title']; ?>
                    <img class="remove-element" src="view/kulercore/images/icons/icon-delete.png" alt="" onclick="$('.vtabs a:first').trigger('click'); $('#module-<?php echo $module_row; ?>').remove(); $('#tab-module-<?php echo $module_row; ?>').remove(); return false;" />
                </a>
            </li>
            <?php $module_row++; ?>
        <?php } ?>
        <li><span class="module-add"><?php echo $button_add_module; ?>&nbsp;<img class="add-element" src="view/kulercore/images/icons/icon-add.png" alt="" onclick="addModule();" /></span></li>
    </ul>
    <?php $module_row = 1; ?>
    <?php foreach ($modules as $module) { ?>
        <?php $module_title = isset($module['module_title']) && $module['module_title'] ? $module['module_title'] : $text_prefix . ' ' . $module_row ?>
        <div id="tab-module-<?php echo $module_row; ?>" class="vtabs-content module-<?php echo $module['type']?>">
        <table class="form">
        <tr>
            <td><?php echo $entry_status; ?></td>
            <td width="10">
                <div class="kuler-switch-btn">
                    <input type='hidden' name='kuler_accordion_module[<?php echo $module_row; ?>][status]' value='0' />
                    <input type="checkbox" name="kuler_accordion_module[<?php echo $module_row; ?>][status]"<?php echo $module['status'] ? ' checked="checked"' : '' ?>  value="1">
                    <span class="kuler-switch-btn-holder"></span>
                </div>
            </td>
        </tr>
        <tr>
            <td><?php echo $entry_showtitle; ?></td>
            <td width="10">
                <div class="kuler-switch-btn">
                    <input type='hidden' name='kuler_accordion_module[<?php echo $module_row; ?>][show_title]' value='0' />
                    <input type="checkbox" name="kuler_accordion_module[<?php echo $module_row; ?>][show_title]"<?php echo isset($module['show_title']) && $module['show_title'] ? ' checked="checked"' : '' ?>  value="1">
                    <span class="kuler-switch-btn-holder"></span>
                </div>
            </td>
        </tr>
        <tr>
            <td><?php echo $entry_title; ?></td>
            <td>
                <?php foreach ($languages as $language) { ?>
                    <p>
                        <input type="text" name="kuler_accordion_module[<?php echo $module_row; ?>][module_title][<?php echo $language['language_id']; ?>]" value="<?php echo $module['module_title'][$language['language_id']]; ?>"<?php if ($language['language_id'] == $config_admin_language_id) { ?> class="ModuleTitle" data-shortcode="#ModuleShortCode_<?php echo $module_row; ?>"<?php } ?> />
                        <img src="view/image/flags/<?php echo $language['image']; ?>" title="<?php echo $language['name']; ?>" />
                    </p>
                <?php } ?>
            </td>
        </tr>
        <tr>
            <td><?php echo $entry_shortcode; ?></td>
            <td>
                <input type="text" id="ModuleShortCode_<?php echo $module_row; ?>" class="ModuleShortCode" name="kuler_accordion_module[<?php echo $module_row; ?>][shortcode]" value="<?php if (isset($module['shortcode'])) echo $module['shortcode']; ?>" readonly="readonly" size="40" />
            </td>
        </tr>
        <tr>
            <td><?php echo $entry_type; ?></td>
            <td><select name="kuler_accordion_module[<?php echo $module_row; ?>][type]" onchange="changeModule(this,<?php echo $module_row ?>)">
                    <option value="category"<?php echo ($module['type'] == 'category' ? ' selected="selected"' : '') ?>><?php echo $text_category ?></option>
                    <option value="product"<?php echo ($module['type'] == 'product' ? ' selected="selected"' : '') ?>><?php echo $text_featured ?></option>
                    <option value="bestseller"<?php echo ($module['type'] == 'bestseller' ? ' selected="selected"' : '') ?>><?php echo $text_bestseller ?></option>
                    <option value="latest"<?php echo ($module['type'] == 'latest' ? ' selected="selected"' : '') ?>><?php echo $text_latest ?></option>
                    <option value="special"<?php echo ($module['type'] == 'special' ? ' selected="selected"' : '') ?>><?php echo $text_special ?></option>
                </select></td>
        </tr>
        <tr class="event-category">
            <td><?php echo $entry_category; ?></td>
            <td><select name="kuler_accordion_module[<?php echo $module_row; ?>][category_id]">
                    <?php foreach ($categories as $category) { ?>
                        <?php if ($category['category_id'] == $module['category_id']) { ?>
                            <option value="<?php echo $category['category_id']; ?>" selected="selected"><?php echo $category['name']; ?></option>
                        <?php } else { ?>
                            <option value="<?php echo $category['category_id']; ?>"><?php echo $category['name']; ?></option>
                        <?php } ?>
                    <?php } ?>
                </select></td>
        </tr>
        <tr class="event-product">
            <td><?php echo $entry_product; ?></td>
            <td><input data-row="<?php echo $module_row ?>" type="text" value="" /></td>
        </tr>
        <tr class="event-product-list">
            <td>&nbsp;</td>
            <td>
                <div id="event-product<?php echo $module_row ?>" class="scrollbox">
                    <?php if(isset($products[$module_row]) && is_array($products[$module_row])) : ?>
                        <?php $class = 'odd'; ?>
                        <?php foreach ($products[$module_row] as $product) : ?>
                            <?php $class = ($class == 'even' ? 'odd' : 'even'); ?>
                            <div id="event-product<?php echo $module_row, '-',$product['product_id']; ?>" class="<?php echo $class; ?>"><?php echo $product['name']; ?> <img src="view/kulercore/images/icons/icon-delete.png" data-row="<?php echo $module_row ?>" />
                                <input type="hidden" value="<?php echo $product['product_id']; ?>" />
                            </div>
                        <?php endforeach ?>
                    <?php endif ?>
                </div>
                <input type="hidden" name="kuler_accordion_module[<?php echo $module_row; ?>][products]" value="<?php echo $module['products'] ?>" /></td>
        </tr>
        <tr>
            <td><?php echo $entry_layout; ?></td>
            <td><select name="kuler_accordion_module[<?php echo $module_row; ?>][layout_id]">
                    <?php foreach ($layouts as $layout) { ?>
                        <?php if ($layout['layout_id'] == $module['layout_id']) { ?>
                            <option value="<?php echo $layout['layout_id']; ?>" selected="selected"><?php echo $layout['name']; ?></option>
                        <?php } else { ?>
                            <option value="<?php echo $layout['layout_id']; ?>"><?php echo $layout['name']; ?></option>
                        <?php } ?>
                    <?php } ?>
                </select></td>
        </tr>
        <tr>
            <td><?php echo $entry_position; ?></td>
            <td><select name="kuler_accordion_module[<?php echo $module_row; ?>][position]">
                    <?php if ($module['position'] == 'content_top') { ?>
                        <option value="content_top" selected="selected"><?php echo $text_content_top; ?></option>
                    <?php } else { ?>
                        <option value="content_top"><?php echo $text_content_top; ?></option>
                    <?php } ?>
                    <?php if ($module['position'] == 'content_bottom') { ?>
                        <option value="content_bottom" selected="selected"><?php echo $text_content_bottom; ?></option>
                    <?php } else { ?>
                        <option value="content_bottom"><?php echo $text_content_bottom; ?></option>
                    <?php } ?>
                    <?php if ($module['position'] == 'column_left') { ?>
                        <option value="column_left" selected="selected"><?php echo $text_column_left; ?></option>
                    <?php } else { ?>
                        <option value="column_left"><?php echo $text_column_left; ?></option>
                    <?php } ?>
                    <?php if ($module['position'] == 'column_right') { ?>
                        <option value="column_right" selected="selected"><?php echo $text_column_right; ?></option>
                    <?php } else { ?>
                        <option value="column_right"><?php echo $text_column_right; ?></option>
                    <?php } ?>
                </select></td>
        </tr>
        <tr>
            <td><?php echo $entry_sort_order; ?></td>
            <td><input type="text" name="kuler_accordion_module[<?php echo $module_row; ?>][sort_order]" value="<?php echo $module['sort_order']; ?>" size="3" /></td>
        </tr>
        <tr>
            <td><?php echo $entry_limit; ?></td>
            <td><input type="text" name="kuler_accordion_module[<?php echo $module_row; ?>][limit]" value="<?php echo $module['limit']; ?>" size="3" />
                <?php if (isset($error_limit[$module_row])) { ?>
                    <span class="error"><?php echo $error_limit[$module_row]; ?></span>
                <?php } ?></td>
        </tr>
        <tr>
            <td><?php echo $entry_dimension; ?></td>
            <td><input type="text" name="kuler_accordion_module[<?php echo $module_row; ?>][image_width]" value="<?php echo $module['image_width']; ?>" size="5" placeholder="width" />
                <input type="text" name="kuler_accordion_module[<?php echo $module_row; ?>][image_height]" value="<?php echo $module['image_height']; ?>" size="5" placeholder="height" />
                <?php if (isset($error_dimension[$module_row])) { ?>
                    <span class="error"><?php echo $error_dimension[$module_row]; ?></span>
                <?php } ?></td>
        </tr>
        <tr>
            <td><?php echo $__['entry_title_limit']; ?></td>
            <td>
                <input type="text" name="kuler_accordion_module[<?php echo $module_row; ?>][title_limit]" value="<?php if (isset($module['title_limit'])) echo $module['title_limit']; ?>" placeholder="<?php echo $__['text_no_limit']; ?>" size="5" />
                <?php echo $__['text_words']; ?>
            </td>
        </tr>
        <tr>
            <td>Product Name</td>
            <td width="10">
                <div class="kuler-switch-btn">
                    <input type='hidden' name='kuler_accordion_module[<?php echo $module_row; ?>][name]' value='0' />
                    <input type="checkbox" name="kuler_accordion_module[<?php echo $module_row; ?>][name]"<?php echo $module['name'] ? ' checked="checked"' : '' ?>  value="1">
                    <span class="kuler-switch-btn-holder"></span>
                </div>
            </td>
        </tr>
        <tr>
            <td>Product Price</td>
            <td width="10">
                <div class="kuler-switch-btn">
                    <input type='hidden' name='kuler_accordion_module[<?php echo $module_row; ?>][price]' value='0' />
                    <input type="checkbox" name="kuler_accordion_module[<?php echo $module_row; ?>][price]"<?php echo $module['price'] ? ' checked="checked"' : '' ?>  value="1">
                    <span class="kuler-switch-btn-holder"></span>
                </div>
            </td>
        </tr>
        <tr>
            <td>Product Rating</td>
            <td width="10">
                <div class="kuler-switch-btn">
                    <input type='hidden' name='kuler_accordion_module[<?php echo $module_row; ?>][rating]' value='0' />
                    <input type="checkbox" name="kuler_accordion_module[<?php echo $module_row; ?>][rating]"<?php echo $module['rating'] ? ' checked="checked"' : '' ?>  value="1">
                    <span class="kuler-switch-btn-holder"></span>
                </div>
            </td>
        </tr>
        <tr>
            <td>Product Description</td>
            <td width="10">
                <div class="kuler-switch-btn">
                    <input type='hidden' name='kuler_accordion_module[<?php echo $module_row; ?>][description]' value='0' />
                    <input type="checkbox" name="kuler_accordion_module[<?php echo $module_row; ?>][description]"<?php echo $module['description'] ? ' checked="checked"' : '' ?>  value="1">
                    <span class="kuler-switch-btn-holder"></span>
                </div>
            </td>
        </tr>
        <tr>
            <td>Description Text:
                <p class="hint">The length of product description.</p>
            </td>
            <td>
                <input type="text" name="kuler_accordion_module[<?php echo $module_row; ?>][description_text]" size="5" value="<?php if (isset($module['description_text'])) echo $module['description_text']; ?>" />
            </td>
        </tr>
        <tr>
            <td>Product Add to Card</td>
            <td width="10">
                <div class="kuler-switch-btn">
                    <input type='hidden' name='kuler_accordion_module[<?php echo $module_row; ?>][add]' value='0' />
                    <input type="checkbox" name="kuler_accordion_module[<?php echo $module_row; ?>][add]"<?php echo $module['add'] ? ' checked="checked"' : '' ?>  value="1">
                    <span class="kuler-switch-btn-holder"></span>
                </div>
            </td>
        </tr>
        <tr>
            <td>Product Wishlist</td>
            <td width="10">
                <div class="kuler-switch-btn">
                    <input type='hidden' name='kuler_accordion_module[<?php echo $module_row; ?>][wishlist]' value='0' />
                    <input type="checkbox" name="kuler_accordion_module[<?php echo $module_row; ?>][wishlist]"<?php echo $module['wishlist'] ? ' checked="checked"' : '' ?>  value="1">
                    <span class="kuler-switch-btn-holder"></span>
                </div>
            </td>
        </tr>
        <tr>
            <td>Product Compare</td>
            <td width="10">
                <div class="kuler-switch-btn">
                    <input type='hidden' name='kuler_accordion_module[<?php echo $module_row; ?>][compare]' value='0' />
                    <input type="checkbox" name="kuler_accordion_module[<?php echo $module_row; ?>][compare]"<?php echo $module['compare'] ? ' checked="checked"' : '' ?>  value="1">
                    <span class="kuler-switch-btn-holder"></span>
                </div>
            </td>
        </tr>
        </table>
        </div>
        <?php $module_row++; ?>
    <?php } ?>
    </form>
    </div>
    </div>
    </div>
    <script type="text/javascript"><!--
    var saveUrl = '<?php echo $action; ?>';
    saveUrl = saveUrl.replace(new RegExp('&amp;', 'g'), '&');
    $('#StoreSelector').on('change', function () {
        window.location = saveUrl + '&store_id=' + $(this).val();
    });

    var module_row = <?php echo $module_row; ?>;

    /**
     * @todo Event for add new module
     */
    function addModule() {
        html  = '\
<div id="tab-module-' + module_row + '" class="vtabs-content">\
	<table class="form">\
	    <tr>\
            <td><?php echo $entry_status; ?></td>\
            <td width="10"><div class="kuler-switch-btn">\
            <input type="hidden" name="kuler_accordion_module[' + module_row + '][status]" value="0" />\
            <input type="checkbox" name="kuler_accordion_module[' + module_row + '][status]" value="1" checked="checked" />\
            <span class="kuler-switch-btn-holder"></span></div></td>\
        </tr>\
	    <tr>\
		    <td><?php echo $entry_showtitle; ?></td>\
		    <td width="10">\
			    <div class="kuler-switch-btn">\
			        <input type="hidden" name="kuler_accordion_module['+ module_row +'][show_title]" value="0" />\
			        <input type="checkbox" name="kuler_accordion_module['+ module_row +'][show_title]" value="1" checked="checked" />\
			        <span class="kuler-switch-btn-holder"></span>\
			    </div>\
		    </td>\
		</tr>\
        <tr>\
            <td><?php echo $entry_title; ?></td>\
            <td>\
                <?php foreach ($languages as $language) { ?>\
                    <p>\
                        <input type="text" name="kuler_accordion_module['+ module_row +'][module_title][<?php echo $language['language_id']; ?>]"<?php if ($language['language_id'] == $config_admin_language_id) { ?> class="ModuleTitle" data-shortcode="#ModuleShortCode_'+ module_row +'"<?php } ?> />\
                        <img src="view/image/flags/<?php echo $language['image']; ?>" title="' + <?php echo $this->jsEncode($language['name']); ?> + '" />\
                    </p>\
                <?php } ?>\
            </td>\
        </tr>\
		<tr>\
		    <td><?php echo $entry_shortcode; ?></td>\
		    <td>\
		      <input type="text" id="ModuleShortCode_'+ module_row +'" class="ModuleShortCode" name="kuler_accordion_module['+ module_row +'][shortcode]" readonly="readonly" size="40" />\
		    </td>\
		</tr>\
	    <tr>\
	        <td><?php echo $entry_type; ?></td>\
	        <td><select name="kuler_accordion_module[' + module_row + '][type]" onchange="changeModule(this,' + module_row + ')">\
	            <option value="category"><?php echo $text_category ?></option>\
	            <option value="product"><?php echo $text_featured ?></option>\
	            <option value="bestseller"><?php echo $text_bestseller ?></option>\
	            <option value="latest"><?php echo $text_latest ?></option>\
	            <option value="special"><?php echo $text_special ?></option>\
        </select></td>\
	    </tr>\
	    <tr class="event-category">\
	        <td><?php echo $entry_category; ?></td>\
	        <td><select name="kuler_accordion_module[' + module_row + '][category_id]">\
		        <?php foreach ($categories as $category) { ?>
            <option value="<?php echo $category['category_id']; ?>">' + <?php echo $this->jsEncode($category['name']); ?> + '</option>\
        <?php } ?>
    </select></td>\
    </tr>\
    \
    <tr class="event-product">\
    <td><?php echo $entry_product; ?></td>\
    <td><input type="text" value="" size="40" /></td>\
    </tr>\
    \
    <tr class="event-product-list">\
    <td>&nbsp;</td>\
    <td><div id="event-product' + module_row + '" class="scrollbox"></div><input type="hidden" name="kuler_accordion_module[' + module_row + '][products]" value=""></td>\
    </tr>\
    \
    <tr>\
    <td><?php echo $entry_layout; ?></td>\
    <td><select name="kuler_accordion_module[' + module_row + '][layout_id]">\
        <?php foreach ($layouts as $layout) { ?>
    <option value="<?php echo $layout['layout_id']; ?>">' + <?php echo $this->jsEncode($layout['name']); ?> + '</option>\
        <?php } ?>
    </select></td>\
    </tr>\
    <tr>\
    <td><?php echo $entry_position; ?></td>\
    <td><select name="kuler_accordion_module[' + module_row + '][position]">\
    <option value="content_top"><?php echo $text_content_top; ?></option>\
    <option value="content_bottom"><?php echo $text_content_bottom; ?></option>\
    <option value="column_left"><?php echo $text_column_left; ?></option>\
    <option value="column_right"><?php echo $text_column_right; ?></option>\
    </select></td>\
    </tr>\
    \
    <tr>\
    <td><?php echo $entry_sort_order; ?></td>\
    <td><input type="text" name="kuler_accordion_module[' + module_row + '][sort_order]" value="" size="3" /></td>\
    </tr>\
    \
    <tr>\
    <td><?php echo $entry_limit; ?></td>\
    <td><input type="text" name="kuler_accordion_module[' + module_row + '][limit]" value="5" size="3" /></td>\
    </tr>\
    <tr>\
    <td><?php echo $entry_dimension; ?></td>\
    <td><input type="text" name="kuler_accordion_module[' + module_row + '][image_width]" value="159" size="5" placeholder="width" />\
    <input type="text" name="kuler_accordion_module[' + module_row + '][image_height]" value="159" size="5" placeholder="height" /></td>\
    </tr>\
    \
    <tr>\
    <td><?php echo $__['entry_title_limit']; ?></td>\
    <td>\
    <input type="text" name="kuler_accordion_module['+ module_row +'][title_limit]" placeholder="<?php echo $__['text_no_limit'] ?>" size="5" />\
        <?php echo $__['text_words']; ?>\
    </td>\
    </tr>\
    \
    <tr>\
    <td>Product Title</td>\
    <td width="10"><div class="kuler-switch-btn">\
    <input type="hidden" name="kuler_accordion_module[' + module_row + '][name]" value="0" />\
    <input type="checkbox" name="kuler_accordion_module[' + module_row + '][name]" value="1" checked="checked" />\
    <span class="kuler-switch-btn-holder"></span></div></td>\
    </tr>\
    \
    <tr>\
    <td>Product Price</td>\
    <td width="10"><div class="kuler-switch-btn">\
    <input type="hidden" name="kuler_accordion_module[' + module_row + '][price]" value="0" />\
    <input type="checkbox" name="kuler_accordion_module[' + module_row + '][price]" value="1" checked="checked" />\
    <span class="kuler-switch-btn-holder"></span></div></td>\
    </tr>\
    \
    <tr>\
    <td>Product Rating</td>\
    <td width="10"><div class="kuler-switch-btn">\
    <input type="hidden" name="kuler_accordion_module[' + module_row + '][rating]" value="0" />\
    <input type="checkbox" name="kuler_accordion_module[' + module_row + '][rating]" value="1" checked="checked" />\
    <span class="kuler-switch-btn-holder"></span></div></td>\
    </tr>\
    \
    <tr>\
    <td>Product Description</td>\
    <td width="10"><div class="kuler-switch-btn">\
    <input type="hidden" name="kuler_accordion_module[' + module_row + '][description]" value="0" />\
    <input type="checkbox" name="kuler_accordion_module[' + module_row + '][description]" value="1" checked="checked" />\
    <span class="kuler-switch-btn-holder"></span></div></td>\
    </tr>\
    \
    <tr>\
    <td>Description Text:\
    <p class="hint">The length of product description.</p>\
    </td>\
    <td>\
    <input type="text" name="kuler_accordion_module[' + module_row + '][description_text]" size="5" />\
    </td>\
    </tr>\
    \
    <tr>\
    <td>Product Add to Card</td>\
    <td width="10"><div class="kuler-switch-btn">\
    <input type="hidden" name="kuler_accordion_module[' + module_row + '][add]" value="0" />\
    <input type="checkbox" name="kuler_accordion_module[' + module_row + '][add]" value="1" checked="checked" />\
    <span class="kuler-switch-btn-holder"></span></div></td>\
    </tr>\
    \
    <tr>\
    <td>Product Wishlist</td>\
    <td width="10"><div class="kuler-switch-btn">\
    <input type="hidden" name="kuler_accordion_module[' + module_row + '][wishlist]" value="0" />\
    <input type="checkbox" name="kuler_accordion_module[' + module_row + '][wishlist]" value="1" checked="checked" />\
    <span class="kuler-switch-btn-holder"></span></div></td>\
    </tr>\
    \
    <tr>\
    <td>Product Compare</td>\
    <td width="10"><div class="kuler-switch-btn">\
    <input type="hidden" name="kuler_accordion_module[' + module_row + '][compare]" value="0" />\
    <input type="checkbox" name="kuler_accordion_module[' + module_row + '][compare]" value="1" checked="checked" />\
    <span class="kuler-switch-btn-holder"></span></div></td>\
    </tr>\
    \
    </table>\
    </div>\
';

        $('#form').append(html);

        $('.module-add').before('<a href="#tab-module-' + module_row + '" id="module-' + module_row + '"><?php echo $text_prefix ?> ' + module_row + '&nbsp;<img class="remove-element" src="view/kulercore/images/icons/icon-delete.png" alt="" onclick="$(\'.vtabs a:first\').trigger(\'click\'); $(\'#module-' + module_row + '\').remove(); $(\'#tab-module-' + module_row + '\').remove(); return false;" /></a>');

        $('#tab-module-' + module_row + ' .event-product').hide();
        $('#tab-module-' + module_row + ' .event-product-list').hide();
        $('#tab-module-' + module_row + ' .htabs a').tabs();

        $('.vtabs a').click(function() {
            $('#tab').val($(this).attr('href'));
        }).tabs();

        $('#module-' + module_row).trigger('click');

        productModule(module_row);

        module_row++;
    }

    /**
     * @todo Event for Autocomplete
     */
    function productModule(row) {
        $('#tab-module-' + row + ' .event-product input').autocomplete({
            delay: 500,
            source: function(request, response) {
                $.ajax({
                    url: 'index.php?route=module/kuler_accordion/autocomplete&store_id=<?php echo $selected_store_id; ?>&token=<?php echo $token; ?>&filter_name=' +  encodeURIComponent(request.term),
                    dataType: 'json',
                    success: function(json) {
                        if (json.length == 0) {
                            json.push({
                                name: "<?php echo $text_no_result ?>",
                                product_id: 0
                            });
                        }
                        response($.map(json, function(item) {
                            return {
                                label: item.name,
                                value: item.product_id
                            }
                        }));
                    }
                });
            },
            select: function(event, ui) {
                if(ui.item.value == 0) {
                    return false;
                }

                $('#event-product' + row + '-' + ui.item.value).remove();

                $('#event-product' + row).append('<div id="event-product' + row + '-' + ui.item.value + '">' + ui.item.label + '<img src="view/kulercore/images/icons/icon-delete.png" alt="" /><input type="hidden" value="' + ui.item.value + '" /></div>');

                $('#event-product' + row + ' div:odd').attr('class', 'odd');
                $('#event-product' + row + ' div:even').attr('class', 'even');

                data = $.map($('#event-product' + row + ' input'), function(element){
                    return $(element).attr('value');
                });

                $('input[name=\'kuler_accordion_module[' + row + '][products]\']').attr('value', data.join());

                $('#event-product' + row + '-' + ui.item.value + ' img').click(function() {
                    $(this).parent().remove();

                    $('#event-product' + row + ' div:odd').attr('class', 'odd');
                    $('#event-product' + row + ' div:even').attr('class', 'even');

                    data = $.map($('#event-product' + row + ' input'), function(element){
                        return $(element).attr('value');
                    });

                    $('input[name=\'kuler_accordion_module[' + row + '][products]\']').attr('value', data.join());
                });

                return false;
            },
            focus: function(event, ui) {
                return false;
            }
        });
    }

    /**
     * @todo Event for chang module type
     */
    function changeModule(obj, row) {
        var type = $(obj).val();

        if(type == 'category') {
            $('#tab-module-' + row + ' .event-category').show();
            $('#tab-module-' + row + ' .event-product').hide();
            $('#tab-module-' + row + ' .event-product-list').hide();
            $('#tab-module-' + row + ' .event-product-list .scrollbox').html('');
            $('#tab-module-' + row + ' .event-product-list input').val('');
        } else if(type == 'product') {
            $('#tab-module-' + row + ' .event-category').hide();
            $('#tab-module-' + row + ' .event-product').show();
            $('#tab-module-' + row + ' .event-product-list').show();
        } else {
            $('#tab-module-' + row + ' .event-category').hide();
            $('#tab-module-' + row + ' .event-product').hide();
            $('#tab-module-' + row + ' .event-product-list').hide();
        }
    }

    // Hide all product ajax select
    $('.module-bestseller .event-product, .module-latest .event-product, .module-special .event-product').hide();
    $('.module-bestseller .event-category, .module-latest .event-category, .module-special .event-category').hide();
    $('.module-bestseller .event-product-list, .module-latest .event-product-list, .module-special .event-product-list').hide();

    $('.module-product .event-category').hide();
    $('.module-category .event-product').hide();
    $('.module-category .event-product-list').hide();
    // Ajax request hook for module product
    $('.vtabs-content .event-product input').each(function() {
        productModule(parseInt($(this).attr('data-row')));
    });
    // Event for img remove
    $('.module-product  .event-product-list img').each(function() {
        var row = $(this).attr('data-row');
        var pid = $(this).next().val();
        $('#event-product' + row + '-' + pid + ' img').click(function() {
            $(this).parent().remove();

            $('#event-product' + row + ' div:odd').attr('class', 'odd');
            $('#event-product' + row + ' div:even').attr('class', 'even');

            data = $.map($('#event-product' + row + ' input'), function(element){
                return $(element).attr('value');
            });

            $('input[name=\'kuler_accordion_module[' + row + '][products]\']').attr('value', data.join());
        });
    });

    $('.vtabs a').click(function() {
        $('#tab').val($(this).attr('href'));
    }).tabs();

    <?php if ($tab) { ?>
    $('.vtabs a[href="<?php echo $tab ?>"]').click();
    <?php } ?>

    (function () {
        var moduleName = '<?php echo $moduleName; ?>';

        function generateShortCode(moduleName, moduleTitle) {
            var shortcode;

            moduleName = moduleName.toLowerCase();
            moduleTitle = moduleTitle.toLowerCase();

            moduleTitle = moduleTitle.replace(/\s+/g, '_');

            return '[' + moduleName + ' ' + moduleTitle + ']';
        }

        // Update the short code when the module title change
        $('#content').on('keyup', '.ModuleTitle', function () {
            $($(this).data('shortcode')).val(generateShortCode(moduleName, this.value));
        });

        // Select the shortcode when focus
        $('#content').on('click', '.ModuleShortCode', function () {
            this.select();
        });

        $('.ModuleTitle').trigger('keyup');
    })();

    /* Kuler Site Builder */
    <?php if (isset($ksb_trigger_creation) && $ksb_trigger_creation) { ?>
    (function () {
        $('.add-element').trigger('click');
    })();
    <?php } ?>
    //--></script>
<?php echo $footer; ?>